<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <select class="province">
      <option>江西省</option>
      <option>福建省</option>
      <option>湖南省</option>
    </select>
    <select class="city">
      <option>赣州市</option>
      <option>南昌市</option>
      <option>九江市</option>
    </select>
  </body>
  <script>
    let deta = {
      "江西省": ["南昌市", "赣州市", "九江市"],
      "福建省": ["福州市", "厦门市", "泉州市"],
      "湖南省": ["长沙市", "湘潭市", "邵阳市"],
    };
    var provinceDom = document.querySelector(".province");
    var cityDom = document.querySelector(".city");
    provinceDom.onchange = function () {

        cityDom.innerHTML = "";
        for(var i=0;i<deta[provinceDom.value].length;i++){
            var createOption = document.createElement("option");
            createOption.text = deta[provinceDom.value][i];
            cityDom.appendChild(createOption);
        }
    };
  </script>
</html>
